import Taro, { Component } from '@tarojs/taro';
import { View, Text, Button, Input } from '@tarojs/components';
import './index.scss';
import { batchInvoiceCreate } from '../../../services/order';
import NavigationBar from '../../../components/navigationBar/index';

export default class Index extends Component {

  config = {
    navigationBarTitleText: '申请发票'
  }

  state = {
    applyPersonal: false,
    companyData: {
      'company_name': '',
      'identify_num': '',
      'mobile': '',
    },
    personalData: {
      'company_name': '',
      'mobile': '',
    },
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  }

  componentWillMount() { }
  componentDidMount() {
    let companyData = Taro.getStorageSync('companyInvoiceData');
    if (companyData) {
      this.setState({
        companyData: companyData
      });
    }
    let personalData = Taro.getStorageSync('personalInvoiceData');
    if (personalData) {
      this.setState({
        personalData: personalData,
      });
    }
  }
  componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  chooseInvoiceType(isPersonal) {
    this.setState({
      applyPersonal: isPersonal
    });
  }

  apply() {
    let isReturnFlag = false;
    if (this.state.applyPersonal) {
      for (let key in this.state.personalData) {
        if (key != 'address') {
          if (!this.state.personalData[key]) {
            isReturnFlag = true;
            Taro.showToast({
              title: '请填写完整',
              icon: 'none'
            });
            break;
          }
        }

      }
      if (isReturnFlag) {
        return;
      }
      Taro.setStorageSync('personalInvoiceData', this.state.personalData);
      var arr = JSON.parse(this.$router.params.id)
      var newarr1 = []
      arr.forEach(ele => {
        newarr1.push({
          type: 0,
          order_id: ele,
          ...this.state.personalData,
        })
      });
      batchInvoiceCreate(newarr1).then(res => {
        Taro.showToast({
          title: '申请成功',
          icon: 'success'
        });
        setTimeout(() => {
          Taro.redirectTo({
            url: '/pages/user/index',
          });
        }, 2000);
      });
    } else {
      for (let key in this.state.companyData) {
        if (key != 'address') {
          if (!this.state.companyData[key]) {
            isReturnFlag = true;
            Taro.showToast({
              title: '请填写完整',
              icon: 'none'
            });
            break;
          }
        }

      }
      if (isReturnFlag) {
        return;
      }
      Taro.setStorageSync('companyInvoiceData', this.state.companyData);
      var arr = JSON.parse(this.$router.params.id)
      var newarr2 = []
      arr.forEach(ele => {
        newarr2.push({
          type: 1,
          order_id: ele,
          ...this.state.companyData,
        })
      });
      batchInvoiceCreate(newarr2).then(res => {
        Taro.showToast({
          title: '申请成功,请耐心等待',
          icon: 'success'
        });
        setTimeout(() => {
          Taro.navigateBack();

        }, 2000);
      });
    }
  }

  handleChange(key, e) {
    let temp = {};
    let data = {};
    temp[key] = e.detail.value;
    if (this.state.applyPersonal) {
      data = Object.assign({}, this.state.personalData, temp);
      this.setState({
        personalData: data
      });
    } else {
      data = Object.assign({}, this.state.companyData, temp);
      this.setState({
        companyData: data
      });
    }
  }

  render() {
    const { applyPersonal, companyData, personalData } = this.state;
    return (
      <View className="apply-invoice" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="批量申请发票" />
        <View className="common-item">
          <View className="text">抬头类型</View>
          <View className="value">
            <View className="company" onClick={this.chooseInvoiceType.bind(this, false)}>
              <View className={!applyPersonal ? 'active circle' : 'circle'}></View>
              <View className="type">企业</View>
            </View>
            <View className="personal" onClick={this.chooseInvoiceType.bind(this, true)}>
              <View className={applyPersonal ? 'active circle' : 'circle'}></View>
              <View className="type">个人</View>
            </View>
          </View>
        </View>
        { !applyPersonal && <View className="company-form">
          <View className="common-item">
            <View className="text">公司抬头</View>
            <View className="value">
              <Input value={companyData['company_name']} onInput={this.handleChange.bind(this, 'company_name')} type="text" placeholder="请输入准确的抬头名称" />
            </View>
          </View>
          {/* <View className="common-item">
            <View className="text">公司税号</View>
            <View className="value">
              <Input value={companyData["company_tax"]} onInput={this.handleChange.bind(this, 'company_tax')} type="number" placeholder="请输入税号" />
            </View>
          </View> */}
          <View className="common-item">
            <View className="text">纳税人识别号</View>
            <View className="value">
              <Input value={companyData["identify_num"]} onInput={this.handleChange.bind(this, 'identify_num')} type="text" placeholder="请输入纳税人识别号" />
            </View>
          </View>
          <View className="line"></View>
          <View className="common-item">
            <View className="text">电话号码</View>
            <View className="value">
              <Input value={companyData['mobile']} onInput={this.handleChange.bind(this, 'mobile')} type="number" placeholder="请输入单位电话号码" />
            </View>
          </View>
          <View className="common-item">
            <View className="text">单位地址</View>
            <View className="value">
              <Input value={companyData['address']} onInput={this.handleChange.bind(this, 'address')} type="text" placeholder="请输入单位地址" />
            </View>
          </View>
        </View>}
        {applyPersonal && <View className="personal-form">
          <View className="common-item">
            <View className="text">发票抬头</View>
            <View className="value">
              <Input value={personalData['company_name']} onInput={this.handleChange.bind(this, 'company_name')} type="text" placeholder="请输入准确的抬头名称" />
            </View>
          </View>
          <View className="common-item">
            <View className="text">手机号</View>
            <View className="value">
              <Input value={personalData['mobile']} onInput={this.handleChange.bind(this, 'mobile')} type="number" placeholder="请输入手机号" />
            </View>
          </View>
          <View className="common-item">
            <View className="text">地址</View>
            <View className="value">
              <Input value={personalData['address']} onInput={this.handleChange.bind(this, 'address')} type="text" placeholder="请输入地址" />
            </View>
          </View>
        </View>}
        <View className="apply-btn" onClick={this.apply}>提交申请</View>
      </View>
    );
  }
}
